<template>
  <div>
    <knob-control
        v-model="semitone"
        :max="2"
        :min="-2"
        :size="150"
        :stroke-width="8"
        :value-display-function="toWord"
        primary-color="#E844C3"
        secondary-color="#E7B6DC"
        text-color="#E844C3"
    ></knob-control>
    <div v-show="false">{{ dataInit }}</div>
  </div>
</template>

<script>

import BaseView from './View';
import topoUtil from '@/views/zutai/components/topo/util/topo-util';
import {mapState} from 'vuex'

export default {
  name: 'view-knob-switch',
  extends: BaseView,
  data() {
    return {
      toWord: function (val) {
        const map = {
          '-1': '倒一档',
          '-2': '倒二档',
          0: '空挡',
          1: '一挡',
          2: '二档',
        }
        return map[val];
      },
      semitone: 0,
    }
  },
  computed: {
    ...mapState({
      mqttData: state => state.topoEditor.mqttData,
    }),
    dataInit() {
      console.log("数显框", this.mqttData);
    }
  },
  watch: {
    semitone(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
</style>
